<template>
	<view class="page">
		<!-- <view class="card">
			<view class="card-title">问题原因<text class="card-must">*</text></view>
			<view class="card-body">
				<view class="card-type">
					<view v-for="(v, k) in typeData" :key="k"
						:class="'card-type-item ' +(k === typeSelected ? 'card-type-item-active' : '')"
						@click="typeSelected = k">
						{{v}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="card">
			<view class="card-title">问题描述<text class="card-must">*</text></view>
			<view class="card-body">
				<textarea v-model="center" placeholder="请输入具体的问题描述"></textarea>
			</view>
		</view>
		<view class="card">
			<view class="card-title">上传照片（{{fileLists.length}}/6）</view>
			<view class="card-body">
				<view class="card-imgs">
					<u-upload :fileList="fileLists" @afterRead="afterRead" @delete="deletePic" name="5" multiple
						:maxCount="6"></u-upload>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">联系方式<text class="card-must">*</text></view>
			<view class="card-body">
				<input placeholder="请输入手机号码"  v-model="phone"/>
			</view>
		</view>
		<view class="button" @click="question()">提交</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	import {
		uploadFile,
	} from '@/store/upload.js'
	export default {
		data() {
			return {
				typeData: ['功能异常', '产品建议', '充值问题', '其他问题'],
				typeSelected: 0,
				fileLists: [],
				phone:'',//手机回访
				center:'',//问题描述
			}
		},
		onLoad() {
           
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.fileLists.shift(event, 1)
				 
			
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileLists.length
				lists.map((item) => {
					this.fileLists.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile([lists[i].url])
					let item = this.fileLists[fileListLen]
					this.fileLists.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result[0]
					}))
					fileListLen++
				}
				 
			},
            question(){
				if(this.center == ''){
					return uni.$u.toast('请填写问题反馈')
				}
				if (this.fileLists.length == 0) {
					uni.showToast({
						title: '请上传照片',
						icon: 'none'
					})
					return false;
				}
				if(this.phone == ''){
					return uni.$u.toast('请填写联系方式')
				}
				let imgs = this.fileLists.map(item => item.url).join(',');
				 
				 this.$api.Problem({
					 ID : this.userInfo.id,
					 content:this.center,
					 phone:this.phone,
					 slider:imgs
				 }).then(res=>{
					 uni.$u.toast('反馈成功')
					 setTimeout(() => {
					     uni.navigateBack(-1)                       
					   }, 2000)
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./feedback.scss";
</style>